<template>
  <div class="logistics">
    <div class="screen_box">
      <div class="select_box">
        <div class="select_li">
          状态：
          <el-select v-model="statusData" placeholder="请选择" size="mini" @change="selectStatus">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li">
          年份：
          <el-select v-model="yearData" placeholder="请选择" size="mini" @change="selectYear">
            <el-option v-for="item in yearOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li">
          月份：
          <el-select v-model="monthData" placeholder="请选择" size="mini" @change="selectMonth">
            <el-option
              v-for="item in monthOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search_box">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="goAdd"
          v-if="(isOtherRole || isNormalRole || isOrgRole) && firstType === '0'">
          办公用品申请单
        </el-button>
        <el-button size="small" @click="goSure" v-if="['3'].includes(userType) && firstType === '1'" type="primary">
          批量确定
        </el-button>
        <el-button size="small" @click="exportForm">导出申请表</el-button>
      </div>
    </div>
    <div class="list_con" v-if="listData.length > 0">
      <div class="infor_left">
        <el-scrollbar class="info_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="{ is_select: activeInfo.id === item.id }"
              @click="lookOne(item)"
              v-for="item in listData"
              :key="item.id">
              <div class="one_con">
                <div class="info_text">
                  <el-checkbox class="full_width" v-model="checkList" :label="item.id">{{ item.title }}</el-checkbox>
                  <!-- {{ item.title }} -->
                  <!-- <span class="temp" v-if="item.applyType === '2'">(临时)</span> -->
                </div>
                <div class="info_status" v-if="item.isSave === '0'">暂存</div>
                <div class="info_status" v-else>{{ item.status | formStatus }}</div>
              </div>
              <div class="one_con con_bottom">
                <div class="info_org">{{ item.orgName }}</div>
                <div class="info_time">{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-pagination
          background
          layout="pager,total"
          :current-page="pagenation.currentPage"
          :page-size="pagenation.pageSize"
          :total="pagenation.totalSize"
          @current-change="onPageChange"
          hide-on-single-page
          :pager-count="5"></el-pagination>
      </div>

      <div class="infor_right">
        <list-detail
          :firstType="firstType"
          :userType="userType"
          :activeInfo="activeInfo"
          @operate="operate"
          @addSuccess="addSuccess"
          ref="listDetail"></list-detail>
      </div>
    </div>
    <div class="list_con" v-else>
      <div class="full_no">暂无申请数据</div>
    </div>
    <!-- 新建 start -->
    <XnDialog
      title="办公用品申请单"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      class="branch_dialog"
      @closed="inforDiaShow = false">
      <logisticsAdd v-if="inforDiaShow" @addSuccess="addSuccess" @cancelData="cancelData" />
    </XnDialog>
    <!-- 新建 end -->
  </div>
</template>

<script>
import {
  getlistLogicticsApplys,
  getlistLogicticsConfirm,
  approveBatch,
  exportLogicticsInfo,
  checkBatchConfirmAuthority,
} from '@apis/api-dailyManage.js'
import listDetail from './listDetail'
import logisticsAdd from './logisticsAdd.vue'
import XnDialog from '@com/xnDialog.vue'
import { mapGetters } from 'vuex'
import { selectYearFun } from '@utility/utility.js'
export default {
  name: 'logisticsList',
  components: { listDetail, logisticsAdd, XnDialog },
  props: {
    userType: {
      type: String,
      default: '',
    },
    firstType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      load: true,
      activeInfo: {},
      statusOptions: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '0',
          label: '待审批',
        },
        {
          value: '1',
          label: '审批通过',
        },
        {
          value: '2',
          label: '审批不通过',
        },
      ],
      statusData: '',
      yearOption: [
        {
          value: '2023',
          label: '2023年',
        },
        {
          value: '2024',
          label: '2024年',
        },
      ],
      yearData: '',
      monthOption: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '1',
          label: '1月',
        },
        {
          value: '2',
          label: '2月',
        },
        {
          value: '3',
          label: '3月',
        },
        {
          value: '4',
          label: '4月',
        },
        {
          value: '5',
          label: '5月',
        },
        {
          value: '6',
          label: '6月',
        },
        {
          value: '7',
          label: '7月',
        },
        {
          value: '8',
          label: '8月',
        },
        {
          value: '9',
          label: '9月',
        },
        {
          value: '10',
          label: '10月',
        },
        {
          value: '11',
          label: '11月',
        },
        {
          value: '12',
          label: '12月',
        },
      ],
      monthData: '',
      pagenation: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      inforDiaShow: false,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      pageList: [],
      checkList: [],
      fromData: '',
      isFirst: true,
      listData: [],
      selectYearFun,
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isApplyRole']),
  },
  filters: {
    formStatus(val) {
      switch (val) {
        case '0':
          return '待审批'
        case '1':
          return '审批通过'
        case '2':
          return '审批不通过'

        default:
          break
      }
    },
  },
  watch: {
    firstType(news) {
      this.activeInfo = {}
      this.fromData = ''
      this.statusData = ''
      this.yearData = ''
      this.monthData = ''
      this.getData()
    },
    pageList: {
      handler(news) {
        // console.log(news)
        this.listData = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.yearOption = this.selectYearFun(2023)
    this.yearOption.unshift({
      value: '',
      label: '全部',
    })
    this.activeInfo = {}
    this.fromData = ''
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      if (this.firstType === '0') {
        this.getlistLogicticsApplys()
      } else {
        this.getlistLogicticsConfirm()
      }
    },
    selectYear() {
      this.monthData = ''
      this.fromData = ''
      this.pagenation.currentPage = 1
      this.getData()
    },
    selectStatus() {
      this.fromData = ''
      this.pagenation.currentPage = 1
      this.getData()
    },
    searchClick() {
      this.fromData = ''
      this.getData()
    },
    lookOne(item) {
      this.activeInfo = item
    },
    onPageChange(e) {
      this.fromData = ''
      this.pagenation.currentPage = e
      this.getData()
    },
    addSuccess(data) {
      this.fromData = data
      if (data === 'add' || data === 'sure') {
        this.pagenation.currentPage = 1
        this.inforDiaShow = false
      }
      this.getData()
    },
    cancelData() {
      this.inforDiaShow = false
    },
    goAdd() {
      this.inforDiaShow = true
    },
    getlistLogicticsApplys() {
      const param = {
        id: '',
        month: this.monthData,
        year: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.userInfo.loginPostInfo.orgId,
        status: this.statusData,
      }
      getlistLogicticsApplys(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.totalSize = res.data.total
          if (this.fromData === 'detail') {
            const arr = this.pageList.filter(item => {
              return item.id === this.activeInfo.id
            })
            this.activeInfo = arr[0]
          } else {
            this.activeInfo = res.data.records[0]
          }
        }
      })
    },
    operate() {
      if (this.pageList.length === 1 && this.pagenation.currentPage > 1) {
        this.pagenation.currentPage--
      }
      this.getlistLogicticsApplys()
    },
    getlistLogicticsConfirm() {
      const id =
        this.$route.query.id && this.isFirst
          ? this.$route.query.id
          : this.fromData && this.$route.query.id === this.activeInfo.id
          ? this.$route.query.id // eslint-disable-line
          : '' // eslint-disable-line
      const param = {
        id: id,
        month: this.monthData,
        year: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.userInfo.loginPostInfo.orgId,
        status: this.statusData,
      }
      getlistLogicticsConfirm(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.currentPage = res.data.current
          this.pagenation.totalSize = res.data.total
          if (this.$route.query.id && this.isFirst) {
            console.log('123456 :>> ', 123456)
            this.isFirst = false
            const arr = this.pageList.filter(item => {
              return item.id === this.$route.query.id
            })
            this.activeInfo = arr[0]
          } else if (this.fromData && !this.statusData) {
            console.log('456789 :>> ', 456789)
            const arr = this.pageList.filter(item => {
              return item.id === this.activeInfo.id
            })
            this.activeInfo = arr[0]
          } else {
            console.log('789123 :>> ', 789123)
            this.activeInfo = res.data.records[0]
          }
          console.log(this.activeInfo)
        }
      })
      if (this.$route.query.id) {
        this.clearUrl()
      }
    },
    goSure() {
      checkBatchConfirmAuthority().then(res => {
        if (res.code === 0 && res.data === '0') {
          this.$confirm('物品已确认发放完毕，暂无确认单', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
          })
        } else {
          this.$confirm('请确认当月物品已发放完毕，确定后不可修改。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              approveBatch().then(res => {
                if (res.code === 0) {
                  this.$message.success('批量确定成功')
                  this.pagenation.currentPage = 1
                  this.getlistLogicticsConfirm()
                }
              })
            })
            .catch(() => {})
        }
      })
    },
    exportForm() {
      if (this.checkList.length === 0) {
        return this.$message.warning('请至少选择一个领用单')
      }
      const req = `?ids=${encodeURIComponent(this.checkList.join(','))}&tenantId=${localStorage.pskh_tenantId}`
      const link = document.createElement('a')
      link.target = 'targetName'
      link.href = exportLogicticsInfo(req)
      link.click()
      link.remove()
    },
    selectMonth() {
      this.fromData = ''
      this.pagenation.currentPage = 1
      this.getData()
    },
    clearUrl() {
      const url = window.location.href
      const urlArr = url.split('?')
      window.history.replaceState(null, null, urlArr[0])
      this.$route.query.id = ''
      this.$route.query.flag = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.logistics {
  height: 100%;
  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid #efefef;
    // box-shadow: 0 3px 5px 0 rgba(2, 2, 2, 0.1);
    .select_box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
          width: 150px;
        }
      }
    }
  }
  .list_con {
    height: calc(100% - 70px);
    display: flex;
    margin-top: 2px;
    .infor_left {
      height: calc(100% - 20px);
      width: 300px;
      margin: 10px;
      border: 1px solid #e5e5e5;
      .info_left {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
      .left_con_list {
        margin: 10px 0;
        padding: 0 10px;
        .infor_left_one {
          padding: 5px 8px;
          cursor: pointer;
          margin-bottom: 10px;
          background-color: #f9f9f9;
          .one_con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
            .info_text {
              font-size: 15px;
              .temp {
                color: #7497c8;
              }
              /deep/.el-checkbox__label {
                white-space: pre-wrap;
              }
            }
            .info_status {
              color: #f59a23;
              padding-left: 10px;
              white-space: nowrap;
            }
            .info_org {
              background-color: #fdeed7;
              border-radius: 4px;
              padding: 2px 6px;
              font-size: 14px;
              color: #86642c;
              word-break: keep-all;
            }
          }
          .con_bottom {
            margin-top: 20px;
          }
        }
        .is_select {
          background-color: #e4ebf0;
        }
      }
    }
    .el-pagination {
      text-align: right;
      margin-top: 10px;
    }
    .infor_right {
      height: calc(100% - 20px);
      width: calc(100% - 300px);
      margin: 10px 0;
      border: 1px solid #e5e5e5;
    }
    .full_no {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
    }
  }
  .branch_dialog {
    /deep/.el-dialog {
      padding-bottom: 20px;
    }
    /deep/.el-dialog__body {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
</style>
